<template>
  <el-card shadow="never" class="card_box">
    <el-form ref="formRef" :inline="true" :model="formData" label-position="left" label-width="auto">
      <div class="form_item_box">
        <el-form-item label="时间筛选" class="content_left_item">
          <el-radio-group v-model="pageType" @change="changDateBtn">
            <el-radio :label="1" class="btn" border>昨天</el-radio>
            <el-radio :label="2" class="btn" border>最近7天</el-radio>
            <el-radio :label="3" class="btn" border>最近30天</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-date-picker @change="onTimeChange" v-model="formData.effect_time" type="datetimerange"
          prefix-icon="Calendar" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" range-separator="—"
          start-placeholder="开始时间" end-placeholder="结束时间" />
        <el-form-item>
          <div class="btn_box">
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="onClear()">清空</el-button>
          </div>
        </el-form-item>
      </div>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { getDay } from '@/utils/utils'
const emit = defineEmits(['secrchsubmit'])
const formData: any = reactive({
  effect_time: [getDay(-6), getDay(0, true)] //创建时间
})
const pageType = ref(2)
const onSubmit = () => {
  emit('secrchsubmit', formData.effect_time)
}
const onTimeChange = (v: any) => {
  !!v || (formData.effect_time = [])
}
const changDateBtn = (v: any) => {
  switch (v) {
    case 1:
      formData.effect_time = [getDay(-1), getDay(-1, true)]
      break
    case 2:
      formData.effect_time = [getDay(-6), getDay(0, true)]
      break
    case 3:
      formData.effect_time = [getDay(-29), getDay(0, true)]
      break
  }
  onSubmit()
}
const onClear = () => {
  formData.effect_time = [getDay(-6), getDay(0, true)]
  pageType.value = 2
  onSubmit()
}
</script>

<style lang="scss" scoped>
.el-radio {
  margin-right: 0;

  :deep(.el-radio__input) {
    display: none;
  }

  &:hover {
    color: #ff6b00;
    border-color: #ff6b00;
  }
}

.card_box {
  margin-bottom: 16px;
}

.form_item_box {
  display: grid;
  grid-template-columns: 375px 400px 1fr;
  grid-gap: 20px;

  .el-form-item {
    margin-bottom: 0;
  }
}

.btn_box {
  text-align: right;
}
.btn {
  margin-right: 10px;
}
</style>
